<template>
  <div class="historyChart" ref="box">
      <div class="analyze" ref="analyze">
          <div>
              <p>{{$t("index.late20")}}&lt;</p>
              <input type="number" v-model="analyTimes">
          </div>
          <button @click="analy">{{$t("index.analy")}}</button>
      </div>
      <table ref="table">
          <tr>
              <th>{{$t("index.times1")}}</th>
              <th>{{$t("index.probab")}}</th>
              <th>{{$t("index.count")}}</th>
              <th>{{$t("index.highContinue")}}</th>
          </tr>
          <tr>
              <td>[1,{{times}})</td>
              <td>{{probab[0]}}</td>
              <td>{{count[0]}}</td>
              <td>{{highContinue[0]}}</td>
          </tr>
          <tr>
              <td>[{{times}},∞)</td>
              <td>{{probab[1]}}</td>
              <td>{{count[1]}}</td>
              <td>{{highContinue[1]}}</td>
          </tr>
      </table>
      <canvas ref="chart"></canvas>
  </div>
</template>

<script>
import trendArr from '../../trend'
export default {
    data(){
        return{
            chartArr:trendArr.slice(trendArr.length-20,trendArr.length).reverse(),
            axisArr:[],//存储折线图坐标
            times:2,
            analyTimes:'',
            probab:['40%','60%'],
            count:[8,12],
            highContinue:[3,6]
        }
    },
    mounted(){
        this.drawChart();
        this.computTab();
    },
    methods:{
        analy(){
            if(!this.analyTimes) return
            this.times = this.analyTimes;
            this.computTab();
            this.drawChart()
        },
        computTab(){
            let lessNum = 0,moreNum = 0,lastOne = null,arr = [],lessContinue = 0, moreContinue = 0;
            let times = Number(this.times);
            this.chartArr.forEach(item=>{
                if(!lastOne) {
                    lastOne = item;
                    arr.push([item.times]);
                    if(item.times < times){
                        lessNum++;
                    }else{
                        moreNum++;
                    }
                }else{
                    if(item.times < times){
                        if(lastOne.times<times){
                            arr[arr.length-1].push(item.times);
                        }else{
                            arr.push([item.times]);
                        }
                        lessNum++;
                    }else{
                        if(lastOne.times >= times){
                            arr[arr.length-1].push(item.times);
                        }else{
                            arr.push([item.times]);
                        }
                        moreNum++;
                    }
                    lastOne = item;
                }
            });
            arr.forEach(item=>{
                if(Number(item[0])<times && lessContinue < item.length){
                    lessContinue = item.length;
                }else if(Number(item[0])>=times && moreContinue < item.length){
                    moreContinue = item.length;
                }
                
            })
            
            this.count = [lessNum,moreNum];
            this.probab = [(lessNum/20*100).toFixed(2)+'%',(moreNum/20*100).toFixed(2)+'%'];
            this.highContinue = [lessContinue,moreContinue]
        },
        setTimes({x,y}){
            let times = 4;
            return {
                x:x*times,
                y:y*times
            }
        },
        drawChart(){
            this.axisArr = [];

            let tabHeight = 40,len = this.chartArr.length;
            let width = document.documentElement.clientWidth*4,height = (tabHeight*(len+1)+40)*4;
            
            let canvas = this.$refs.chart;
            canvas.width = width;
            canvas.height = height;

            let ctx = canvas.getContext('2d');

            this.drawLine(ctx,width,"#45647D",this.setTimes({x:70,y:10}),{x:width-10*4,y:10*4})
            this.drawLine(ctx,width,"#45647D",this.setTimes({x:70,y:10}),this.setTimes({x:70,y:10+tabHeight*len}))
            this.drawLine(ctx,width,"#45647D",{x:(width-80*4)/2+70*4,y:10*4},{x:(width-80*4)/2+70*4,y:10*4+tabHeight*4*len})
            this.drawLine(ctx,width,"#45647D",{x:width-10*4,y:10*4},{x:width-10*4,y:10*4+tabHeight*4*len})
            
            ctx.beginPath();
            ctx.font = 14*4+"px 黑体";
            ctx.fillStyle = "#7EA1BD";
            this.chartArr.forEach((item,index)=>{
                ctx.fillText(item.issue,10*4,(index*tabHeight+35)*4);
                this.drawLine(ctx,width,"#45647D",this.setTimes({x:70,y:10+(index+1)*tabHeight}),{x:width-10*4,y:10*4+(index+1)*tabHeight*4});
            })
            ctx.fillText('[1, '+this.times+')',(width-80*4)/4+50*4,(tabHeight+tabHeight*len-5)*4)
            ctx.fillText('['+this.times+', ∞)',(width-80*4)/4*3+50*4,(tabHeight+tabHeight*len-5)*4)
            ctx.closePath();
            
            this.chartArr.forEach((item,index)=>{
                if(Number(item.times)<this.times){
                    this.axisArr.push({
                        x:(width-80*4)/4+70*4,
                        y:(index*tabHeight+30)*4
                    })
                }else{
                    this.axisArr.push({
                        x:(width-80*4)/4*3+70*4,
                        y:(index*tabHeight+30)*4
                    })
                }
            });

            //绘制折线
            for(let i = 0; i < this.axisArr.length; i++){
                if(i===0) continue;
                this.drawLine(ctx,width,"#50F3A1",(this.axisArr[i-1]),(this.axisArr[i]))
            }

            //绘制圆角矩形框
            this.chartArr.forEach((item,index)=>{
                if(Number(item.times)<this.times){
                    this.drawButton(ctx,"#50F3A1",(width-80*4)/4+(70-26.5)*4,(index*tabHeight+30-11)*4,53*4,22*4,11*4,item.times)
                }else{
                    this.drawButton(ctx,"#50F3A1",(width-80*4)/4*3+(70-26.5)*4,(index*tabHeight+30-11)*4,53*4,22*4,11*4,item.times)
                }
            });

            this.$refs.box.style.height = this.$refs.analyze.scrollHeight + this.$refs.table.scrollHeight + this.$refs.chart.scrollHeight/4 + 20 + 'px'

        },
        drawLine(ctx,width,color,start,end){
            ctx.beginPath();
            ctx.strokeStyle = color;
            ctx.lineWidth = 0.7*4;
            ctx.moveTo(start.x,start.y);
            ctx.lineTo(end.x,end.y);
            ctx.stroke();
            ctx.closePath();
        },
        drawButton(ctx,color,x,y,width,height,radius,text){//x/y:按钮起始点,width/height按钮宽高,radius弧度
            //分为4条直线4个圆角绘制，如果弧度大于宽度的一半，直接绘制两条直线两个弧度
            ctx.beginPath();
            ctx.fillStyle = color;
            ctx.moveTo(x+radius,y);
            ctx.lineTo(x+width-radius,y);
            ctx.arc(x+width-radius,y+radius,radius,Math.PI*3/2, Math.PI*2);
            ctx.lineTo(x+width,y+height-radius);
            ctx.arc(x+width-radius,y+height-radius,radius,Math.PI,Math.PI/2);
            ctx.lineTo(x+radius,y+height);
            ctx.arc(x+radius,y+height-radius,radius,Math.PI/2,Math.PI);
            ctx.lineTo(x,y+radius);
            ctx.arc(x+radius,y+radius,radius,Math.PI,Math.PI*3/2);
            ctx.fill();
            ctx.closePath();

            ctx.beginPath();
            ctx.fillStyle = "#fff";
            ctx.font = 13*4+"px 黑体";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
            ctx.fillText(text,x+width/2,y+height/2);
        }
    }
}
</script>

<style lang="scss" scoped>
.historyChart{
    font-size: .13rem;
    margin-top: .26rem;
    overflow: hidden;
    .analyze{
        padding: 0 .1rem;
        display: flex;
        justify-content: space-between;
        margin: .16rem 0;
        >div{
            display: flex;
            align-items: center;
            p{
                margin-right: .1rem;
            }
            input{
                height: .3rem;
                width: .42rem;
                background: #1B2F3E;
                border-radius: .03rem;
                border: solid #45647D .005rem;
                color: #fff;
                text-align: center;
                outline: none;
            }
        }
        button{
            height: .3rem;
            width: .74rem;
            border-radius: .03rem;
            background: linear-gradient(to right,#FFDC3B 0%,#FFC433 100%);
            color: #fff;
        }
    }
    table{
        margin: .1rem auto;
        width: 3.4rem;
        border-collapse:collapse;
        text-align: center;
    }
    th,td{
        border: solid .0033rem;
        font-size: .13rem;
        height: .3rem;
    }

}
canvas{
    transform: scale(.25) translate(-150%,-150%);
}
</style>